<%@page import="bll.EnumName"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page import="java.util.*,util.*,dal.*,model.*, bll.*"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Create New Project</title>
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/inputForm.css" />
<link rel="stylesheet" href="css/listForm.css" />
<link rel="stylesheet" href="css/jquery-ui-1.8.14.custom.css" type="text/css" />
<link rel="stylesheet" href="css/hyjack.css" type="text/css" />
<link rel="stylesheet" href="css/datepicker.css" type="text/css" />
<link rel="stylesheet" href="css/themes/ui-lightness/jquery.ui.all.css" />
<link rel="stylesheet" href="css/jquery-ui-timepicker.css" type="text/css" />
<link rel="stylesheet" href="css/jquery-datepicker.css" />
<link rel="stylesheet" href="css/jquery-dialog.css" />

<script language="javascript" type="text/javascript" src="js/datepicker.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.hyjack.select.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.core.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.widget.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.timepicker.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.hyjack.js"></script>
<script language="javascript" type="text/javascript" src="js/ajaxQuickInsert.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.numeric.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ui.tools.min.js"></script>
<script language="javascript" type="text/javascript" src="js/common.js"></script>

<script language="javascript" type="text/javascript">

	$(document).ready(function(){
			pageLoaded();
			
			// TODO calculate size		
		 	var x = 1000;
		    var y = 600;
		    parent.$.colorbox.resize({width:x, height:y});
	});

	function pageLoaded()
	{
		turnOnNumbericInput();
		initDatePicker();
		initTooltip();	
	} 
	var requiredInputs = [['name','name_required'],['plan_start_date_date','plan_start_date_date_required'],['plan_end_date_date','plan_end_date_date_required']];
// 	var intInputs = [];
// 	var doubleInputs = [];
	var dateInputs = [['plan_start_date_date','plan_start_date_date_invalid'],['plan_end_date_date', 'plan_end_date_date_invalid']];
//	var timeInputs = [];

	function checkInputs() {
		var valid = true;

		if (checkRequiredInputs(requiredInputs) == false) {
			valid = false;
		}
// 		if (checkIntInputs(intInputs) == false) {
// 			valid = false;
// 		}
// 		if (checkDoubleInputs(doubleInputs) == false) {
// 			valid = false;
// 		}
		if (checkDateInputsForCorrectedFormatOnly(dateInputs, dateFormat) == false) {
			valid = false;
		}
// 		if (checkTimeInputs(timeInputs) == false) {
// 			valid = false;
// 		}

		// SPECIFIC VALIDATE CODE HERE		
		return valid;
	}

	function submitImageUploadForm()
	{
		// TODO: image validation here
		//alert("Befor submitting!");
		
		// Submit form
		document.uploadForm.submit();
		imageName = document.getElementById("inputAvatar").value;
		document.getElementById("avatar").value = imageName;
		//alert(document.getElementById("avatar").value);
	}
</script>
</head>
<body><div class="divContainer">
	<%@ include file="menu.jsp"%>
	
		<table class="tblInput">
			<tr>
				<td class="inputHeader">Create New Project</td>
			</tr>
			<tr><td style="padding-left: 400px; padding-right: 400px;">
				
				<table cellspacing="0px">
					<tr class="trField">
						<td class="tdFieldName">Avatar</td>
						<td class="tdFieldInput" colspan="2">
							<form id="uploadForm" name="uploadForm" action="upload" enctype="multipart/form-data" method="post" target="hiddenIframe">
								<span><input type="file" id="inputAvatar" name="inputAvatar" title="Click to add representative image." onchange="submitImageUploadForm()"/></span>
								<!-- <span><input type="submit" id="addAvatar" value="Upload" title="Click to upload image."/></span> -->
							</form>
							<iframe name="hiddenIframe" id="hiddenIframe" style="display:none;"></iframe>
						</td>
					</tr>				
				</table>	
				
			</td></tr>
			<tr><td style="padding-left: 400px; padding-right: 400px;">
				<form id="inputForm" action="project?mode=insert" method="post" onSubmit="return checkInputs()" onreset="return confirm('Do you really want to reset the form?')">
				<input type="hidden" id="avatar" name="avatar" value=""/>
				<table cellspacing="0px">
					<tr class="trField">
						<td class="tdFieldName">Name</td>
						<td class="tdFieldInput"><input class="inputText" type="text" id="name" name="name" maxlength="255" title="Name of project. Note: Required." onblur="validateRequiredInput('name');"/>
						</td>
						<td class="tdErrMsg">
							<span id="name_required" class="errMsg" style="display: none;" title="Name is required">(!)</span> 	
						</td>
					</tr>
					<tr class="trField">
						<td class="tdFieldName">Description</td>
						<td class="tdFieldInput" colspan="2"><textarea id="description" name="description" rows="5" class="inputTextarea" title="Description for new project."></textarea>
						</td>
<!-- 						<td class="tdErrMsg"></td> -->
					</tr>					
					<tr class="trField">
						<td class="tdFieldName">Project Manager</td>
						<td class="tdFieldInput">
							<select id="pm" name="pm" class="hyjack" title="Choose a manager for this project.">
								<%=HtmlUtil.<EmployeeModel>genModelSelect(CacheUtil.getPMList(), null, Integer.MIN_VALUE, false, true)%>
							</select>
							<input class="btnAdd" type="button" id="addNewPm" value="" onclick="ajaxAddItem('#pm', 'employee', 'name', 'Please enter new project manager name!');" title="Click here to add new employee."/>
						</td>
						<td class="tdErrMsg">
						</td>
					</tr>						
					<tr class="trField">
						<td class="tdFieldName">Project type</td>
						<td class="tdFieldInput">
							<select id="pm" name="pm" class="hyjack" title="Choose a manager for this project.">
								<%=HtmlUtil.<ProjectTypeModel>genModelSelect(CacheUtil.getProjectTypeList(), null, Integer.MIN_VALUE, false, false)%>
							</select>							
						</td>
						<td class="tdErrMsg">
						</td>
					</tr>
					<tr class="trField">
						<td class="tdFieldName">Project template</td>
						<td class="tdFieldInput">
							<select id="pm" name="pm" class="hyjack" title="Choose a manager for this project.">
								<%=HtmlUtil.<ProjectModel>genModelSelect(CacheUtil.getProjectTemplateList(), null, Integer.MIN_VALUE, false, false)%>
							</select>							
						</td>
						<td class="tdErrMsg">
						</td>
					</tr>
					<tr class="trField">
						<td class="tdFieldName">Status</td>
						<td class="tdFieldInput"><select id="status" name="status" class="hyjack" title="Choose one status for the project.">
								<%=HtmlUtil.genEnumSelect(EnumName.ProjectStatus, null) %>
						</select>
<!-- 						<span class="textGuide">(Can not add)</span> -->
						</td>
						<td class="tdErrMsg"></td>
					</tr>
					<tr class="trField">
						<td class="tdFieldName">Client</td>
						<td class="tdFieldInput"><select id="id_company" name="id_company" class="hyjack" title="Choose a company for the project.">
								<%=HtmlUtil.<CompanyModel>genModelSelect(CacheUtil.getCompanyList(), null) %>
							</select>
							<input class="btnAdd" type="button" id="addNewIdCompany" value="" onclick="ajaxAddItem('#id_company', 'company', 'short_name', 'Please enter your company short name!');" title="Click here to add new company." />
						</td>
						<td class="tdErrMsg"></td>
					</tr>
					<tr>
						<td class="tdFieldName">Budget</td>
						<td class="tdFieldInput">
							<input class="inputNumeric" type="text" id="budget" name="budget" title="Project budget. <br/>Note: numeric only." maxlength="20"/>
						</td>
						<td class="tdErrMsg">
						</td>				
					</tr>
					<tr class="trField">
						<td class="tdFieldName">Attendees</td>
						<td class="tdFieldInput">
							<input class="inputInt" type="text" id="attendees" name="attendees" maxlength="10" title="Number of attendee. Note: Only number allowed!"/>
						</td>
						<td class="tdErrMsg">
						</td>
					</tr>
					<tr class="trField">
						<td class="tdFieldName">Venue</td>
						<td class="tdFieldInput"><select id="id_venue" name="id_venue" class="hyjack" title="Choose one venue for the project.">
								<%=HtmlUtil.<VenueModel>genModelSelect(CacheUtil.getVenueList(), null)%>
							</select>
							<input class="btnAdd" type="button" id="addNewIdVenue" value="" onclick="ajaxAddItem('#id_venue', 'venue', 'name', 'Please enter new venue name!');" title="Click here to add new venue." />
						</td>
						<td class="tdErrMsg">
						</td>
					</tr>
					<tr class="trField">
						<td class="tdFieldName">Plan Start Date</td>				
						<td class="tdFieldInput">
							<input type="text" maxlength="10" class="inputDate" id="plan_start_date_date" name="plan_start_date_date" title="Click to choose plan start date. Note: Required." onblur="validateRequiredInput('plan_start_date_date',false);" onchange="validateDateInput('plan_start_date_date',true)" />
							<span class="textGuide"> (dd/mm/yyyy)</span>								
						</td>
						<td class="tdErrMsg">
							<span id="plan_start_date_date_required" class="errMsg" style="display: none;" title="Plan start date is required">(!)</span>
							<span id="plan_start_date_date_invalid" class="errMsg" style="display: none;" title="You've entered an invalid date.<br/>The format is <b>dd/mm/yyyy</b>">(!)</span>
						</td>
					</tr>
					<tr class="trField">
						<td class="tdFieldName">Plan End Date</td>				
						<td class="tdFieldInput">
							<input type="text" maxlength="10" class="inputDate" id="plan_end_date_date" name="plan_end_date_date"  title="Click to choose plan end date. Note: Required."  onblur="validateRequiredInput('plan_end_date_date',false);" onchange="validateDateInput('plan_end_date_date',true)"/>
							<span class="textGuide"> (dd/mm/yyyy)</span>									
						</td>
						<td class="tdErrMsg">
							<span id="plan_end_date_date_required" class="errMsg" style="display: none;" title="Plan End Date is required">(!)</span>
							<span id="plan_end_date_date_invalid" class="errMsg" style="display: none;" title="You've entered an invalid date. <br/>The format is <b>dd/mm/yyyy</b>">(!)</span>
						</td>
					</tr>					
					<tr class="trInputBottom">
						<td class="tdFieldName"></td>
						<td class="tdSubmit">
							<div class="divButtonSubmit" >
								<input class="btnSubmit" type="submit" value="Submit" title="Click to save above information." />
							</div>
							<div class="divButtonReset">
								<input class="btnReset" type="reset" value="Reset" title="Click to reset all above fields." />
							</div>
							<div style="clear: both;">
							</div>
						</td>
									
<!-- 						<td class="tdInputBottom" colspan="3"> -->
<!-- 							<table class="tblSubmit" align="center"> -->
<!-- 								<tr class="trSubmit"> -->
<!-- 									<td class="tdSubmit"><input class="btnSubmit" type="submit" value="Submit" title="Click to save above information." /></td> -->
<!-- 									<td class="tdReset"><input class="btnReset" type="reset" value="Reset" title="Click to reset all above fields." /></td> -->
<!-- 								</tr> -->
<!-- 							</table></td> -->
					</tr>
				</table>
				</form>
			</td></tr>
		</table>	
	<jsp:include page="projectList.jsp?embedded=true"></jsp:include>
</div></body>
</html>